<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>接单成功 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
        }
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #000;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }
        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 32px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen flex flex-col py-0">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">接单成功</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto z-10" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center cursor-pointer" title="退出">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容区 -->
            <div class="flex-1 flex flex-col items-center justify-start px-6 py-4 mt-8">
                <!-- 成功icon -->
                <div class="flex items-center justify-center w-20 h-20 rounded-full bg-blue-500 mb-6 mt-2">
                    <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
                <!-- 订单号 -->
                <div class="flex items-center justify-center text-xs text-gray-400 mb-2 select-all">
                    <span id="order-id">订单号：202406010002</span>
                    <button id="copy-order-id" class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none" title="复制订单号">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                            <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
                        </svg>
                    </button>
                </div>
                <!-- toast提示 -->
                <div id="toast-tip" style="display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.85);color:#fff;padding:10px 24px;border-radius:20px;font-size:15px;z-index:9999;pointer-events:none;">已复制</div>
                <!-- 标题 -->
                <div class="text-2xl font-bold text-blue-600 mb-2">接单成功！</div>
                <!-- 说明 -->
                <div class="text-gray-500 text-base mb-8 text-center leading-relaxed">
                    请尽快与玩家联系并按要求完成订单<br>
                    你可以在 <span class="font-semibold text-blue-500">【订单】</span> 页中管理和跟进进度
                </div>
                <!-- 按钮 -->
                <div class="flex w-full gap-4">
                    <a href="order-receive.html" class="flex-1 h-12 rounded-full border border-gray-300 text-gray-700 bg-white font-bold text-base flex items-center justify-center">返回接单页</a>
                    <a href="order.html" class="flex-1 h-12 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white font-bold text-base flex items-center justify-center">去订单页</a>
                </div>
            </div>
        </div>
    </div>
    <script>
    function showToast(msg) {
        var toast = document.getElementById('toast-tip');
        toast.innerText = msg;
        toast.style.display = 'block';
        clearTimeout(window._toastTimer);
        window._toastTimer = setTimeout(function(){
            toast.style.display = 'none';
        }, 1200);
    }
    document.getElementById('copy-order-id').onclick = function() {
        var text = document.getElementById('order-id').innerText.replace('订单号：', '').trim();
        navigator.clipboard.writeText(text).then(function() {
            showToast('已复制');
        });
    };
    </script>
</body>
</html> 